﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8" />
<title>用户管理</title>
<!--必须的css引用-->
<link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/editable/css/bootstrap-editable.css}" rel="stylesheet" />
<link th:href="@{/static/bootstrap/table/bootstrap-table.min.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/select/bootstrap-select.min.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/select2/select2.min.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/zTree/bootstrap.zTree.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/toastr/toastr.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/fileUpload/fileinput.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/spinner/bootstrap-spinner.css}" rel="stylesheet"/>
<link th:href="@{/static/font-awesome/css/font-awesome.min.css}" type="text/css" rel="stylesheet"/>
<link th:href="@{/static/miniui/themes/default/miniui.css}"  rel="stylesheet" />
<link th:href="@{/static/layui/css/layui.css}"  rel="stylesheet" />
<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
<style type="text/css">
/*滚动条样式*/
	::-webkit-scrollbar-track {
        background-color: #f5f5f5;
    }

    ::-webkit-scrollbar {
        width: 6px;
        background-color: #f5f5f5;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #999;
    }
	.my-container {
	    /* float: right; */
	    display: inline-block;
	    margin-right:9px;
	    margin-top:8px;
	}
	
	.myLabel-content ,.myText-content,.myBtn-content{
	    float: left; 
	    display: inline-block;
	    margin-left: 10px;
	}
	.myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
	    height: 30px;
	    font-size: 12px;
	}
	
	.myBtn-content .btn {
	    /* margin-bottom: 10px; */
	} 

	.search-collapse{
		margin-top:5px;
	} 
	button, select {
	    text-transform: none;
	    height: 30px;
	} 
	.myLabel-content{
		padding-top: 5px;
	}
	.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100px;
	}
	
	.alert-pass{
		width: 230px;
	    color: #3c763d;
	    background-color: #dff0d8;
	    border-color: #d6e9c6;
	    border: 1px solid transparent;
    	border-radius: 4px;
	}
	
	.control-label{
		padding-top: 7px;
	    margin-bottom: 0;
	    text-align: right;
	}
	/* 部门岗位选择框 */
	.form-inline .bootstrap-select, .form-inline .bootstrap-select.form-control:not([class*=col-])
	{
    	width: 200px;
    	margin-right:10px;
	}
	
	.input-group-btn-vertical > .btn {
	    display: block;
	    float: none;
	    width: 100%;
	    max-width: 100%;
	    padding: 7px;
	    margin-left: -1px;
	    position: relative;
	    border-radius: 0;
    }
    .pagination>.active>a{
		z-index: 3;
	    color: #fff;
	    cursor: default;
	    background-color: #337ab7;
	    border-color: #2e6da4;
	}
</style>
</head>
<body>
<div class="mini-splitter" style="width:100%;height:540px;">
	<!-- 左侧	 -->
	<div showCollapseButton="true" style="padding:5px;" size="22%" >
		<div id="deptToolBar"></div>
		<!-- 搜索框 -->
		<input type="text" id="tree_key" class="form-control input-sm" autocomplete="off" placeholder="输入部门名称" oninput="onNamechange()">
		<!-- 树形插件 -->
		<ul id="deptTree" class="ztree"></ul>
	</div>
	<!-- 右侧 -->
	<div showCollapseButton="false" size="78%">
		<!-- shiro在js标签中不生效，而编辑删除按钮在js中动态生成，所以此处用隐藏域，在js中判断是否存在 -->
		<shiro:hasPermission name="user:edit"><input type="hidden" id="user-edit" value='ue'/></shiro:hasPermission>
		<shiro:hasPermission name="user:remove"><input type="hidden" id="user-remove" value='ur'/></shiro:hasPermission>
		<shiro:hasPermission name="user:effective"><input type="hidden" id="user-effective" value='uf'/></shiro:hasPermission>
		<!-- 部门增删改：只应该管理员有该权限 -->
		<shiro:hasPermission name="dept:crud"><input type="hidden" id="dept-crud" value='dc'/></shiro:hasPermission>

		<!-- 顶部查询 -->
		<div class="col-sm-12 search-collapse" style="margin-left:-15px;margin-right:-13px;margin-bottom: -5px;">
			<div style="border:1px solid #ddd;border-radius: 5px;width:103.5%;">
				<form id="user-form">
					<input type="hidden" id="deptId"></input> 
					<div class="my-container">
					     <label class="myLabel-content">昵称</label>
					     <div class="myText-content">
					         <input id="srealname" autocomplete="off" type="text" class="form-control input-xlarge" placeholder="输入昵称关键字">
					     </div>
					 </div>
					 <div class="my-container">
					     <label class="myLabel-content">年龄</label>
					     <div class="myText-content">
							 <div class="input-group spinner">
							    <input type="text" class="form-control" autocomplete="off" id="sage" placeholder="输入年龄">
							    <div class="input-group-btn-vertical" >
							      <button class="btn btn-default" style="height:15px;" type="button"><i class="fa fa-caret-up" style="font-size: smaller;"></i></button>
							      <button class="btn btn-default" style="height:15px;" type="button"><i class="fa fa-caret-down" style="font-size: smaller;"></i></button>
							    </div>
							  </div>
						 </div>
					 </div>
					 <div class="my-container">
					     <label class="myLabel-content">状态</label>
					     <div class="myText-content" >
					         <select id="state" name="state" class="selectpicker input-medium" value="2" title="选择状态"></select>
					     </div>
					 </div>
					 <div style="float:right;margin-top:8px;margin-right:5px;">
						 <div class="myBtn-content">
						     <button id="search" type="button" class="btn btn-primary"><span class="fa fa-search" aria-hidden="true"></span>&nbsp;搜索</button>
						     <button id="reset" type="button" class="btn btn-primary"><span class="fa fa-close" aria-hidden="true"></span>&nbsp;重置</button>
						 </div>
					 </div>
				</form>
			</div>
		</div>
		<!--按钮栏  -->
		<div id="toolbar" class="btn-group">
			 <div class="myBtn-content">
			     <button id="btn_add" type="button" class="btn btn-primary" shiro:hasPermission="user:add"><span class="fa fa-user-plus" aria-hidden="true"></span>&nbsp;新增</button>
			     <button id="btn_remove" type="button" class="btn btn-primary" shiro:hasPermission="user:batchRemove"><span class="fa fa-trash" aria-hidden="true"></span>&nbsp;批量删除</button>
			     <button id="btn_effect" type="button" onClick="clickbtn('e')" class="btn btn-primary" shiro:hasPermission="user:effective"><span class="fa fa-user-secret" aria-hidden="true"></span>&nbsp;生效</button>
			     <button id="btn_invalid" type="button" onClick="clickbtn('i')" class="btn btn-primary" shiro:hasPermission="user:effective"><span class="fa fa-user-times" aria-hidden="true"></span>&nbsp;失效</button>
			 
			 	<div class="btn-group">
			 		<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
			 			<span class="caret"></span>
			 		</a>
			 		<ul class="dropdown-menu" style="min-width:96px;text-align: center;">
			 			<li><a href="/file_excel/downloadModel?voName=user"><span class="fa fa-download"></span>&nbsp;下载模板</a></li>
			 			<li><a href="javascript:void(0);" onclick="importUser()"><span class="fa fa-cloud-upload"></span>&nbsp;用户导入</a></li>
			 			<li class="divider"></li>
			 			<li><a href="/user/exportExcel"><span class="fa fa-cloud-download"></span>&nbsp;用户导出</a>
		<!-- 	 			<li class="dropdown-submenu"><a href="#"><span class="fa fa-cloud-download"></span>&nbsp;用户导出</a>
			 				<ul class="dropdown-menu">
			 					<li><a href="#"><span class="fa fa-cloud-download"></span>&nbsp;导出当前</a></li>
			 					<li><a href="#"><span class="fa fa-cloud-download"></span>&nbsp;导出所有</a></li>
			 				</ul>
			 			</li> -->
			 		</ul>
			 	</div>
			 </div>           
		</div>   
		<!-- 表格插件 -->   
		<table id="tb_user"></table>
	</div>
</div>
<!-- 用户主页面完 -->

<!--新增或者编辑的弹出模态框-->
<div class="modal fade" id="addModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="padding:0px">
            	<h4 class="modal-title" style="text-align:center">新增用户</h4>
            </div>
	        <form id="addUserForm"  enctype="multipart/form-data">
	         <input type="hidden" name="aid" id="aid">
	         <input type="hidden" name="uid" id="uid">
            <div class="modal-body" style="height:330px;">
				<ul class="nav nav-tabs" role="tablist">
				  <li class="active" style="width: 50%;"><a href="#main" role="tab" data-toggle="tab" style="text-align:center;">基本信息</a></li>
				  <li style="width: 50%;"><a href="#other" role="tab" data-toggle="tab" style="text-align:center;">用户头像</a></li>
				</ul>
					<div  class="tab-content">
						<div class="tab-pane active " id="main">
			                <div class="row" style="padding:10px;">
			                    <label class="control-label col-xs-2">账号</label>
			                    <div class="col-xs-4">
			                        <input type="text" name="username" autocomplete="off" class="form-control" placeholder="输入账号">
			                    </div>
			                
			                    <label class="control-label col-xs-2">昵称</label>
			                    <div class="col-xs-4">
			                        <input type="text" name="realname" autocomplete="off" class="form-control" placeholder="输入昵称">
			                    </div>
			                </div>
			                <div class="row" style="padding:10px;">
			                    <label class="control-label col-xs-2">年龄</label>
			                    <div class="col-xs-4">
			                        <input type="text" name="age" autocomplete="off" class="form-control" placeholder="输入年龄">
			                    </div>
			                    <label class="control-label col-xs-2">性别</label>
			                    <div class="col-xs-4" style="margin-top: 7px;">
								    <label class="radio-inline">
								        <input type="radio" name="sex" id="sex1" value="1" checked> 男
								    </label>
								    <label class="radio-inline">
								        <input type="radio" name="sex" id="sex2"  value="0"> 女
								    </label>
			                    </div>
			                </div>
			                <div class="row" style="padding:10px;">
			                    <label class="control-label col-xs-2">电话</label>
			                    <div class="col-xs-4">
			                        <input type="text" name="phone" autocomplete="off" class="form-control" placeholder="输入电话">
			                    </div>
			                    <label class="control-label col-xs-2">邮箱</label>
			                    <div class="col-xs-4">
			                        <input type="email" name="email" class="form-control" placeholder="输入邮箱">
			                    </div>
			                </div>
			                <div class="row form-inline" style="padding:10px;">
			                    <label class="control-label col-xs-2">部门</label>
			                    <div class="col-xs-4">
		                    	<select class="selectpicker  form-control" data-live-search="true" title="请选择部门" data-size="8" id="did" name="did">
		    					</select>
			                    </div>
			                    <div class="col-xs-6" style="margin-left: -7px;">
		    					<select class="selectpicker form-control" title="岗位可多选" multiple="multiple"  id="postId" name="postId">
		    					</select>
			    				</div>
			                </div>
			                <div class="row" style="padding:10px;">
			                    <label class="control-label col-xs-2">角色</label>
			                    <div class="col-xs-10" style="margin-top: 7px;">
			                    	<div id="checkboxDiv"></div>
			                    </div>
			                </div>
                		</div>
	                	<div class="tab-pane" id="other"> 
		                	<div class="form-group">
							    <label for="headPicture" class="col-sm-2 control-label">头像</label>
							    <div class="col-sm-10">
									<input id="headPic"  name="headPicture" type="file" class="file" />
							    </div>
						  	</div>
	                	</div>
					</div>
            </div>
            <div class="modal-footer">
		        <div class="alert-pass">
		  			提示!初始密码为用户注册账号。
				</div>
                <input id="addClostBtn" type="button" class="btn btn-default" data-dismiss="modal" value="关闭"/>
                <input id="addUserBtn" type="submit" class="btn btn-primary" value="保存" />
            </div>
            </form>
        </div>
    </div>
</div>
<!--必须的js文件-->
<script th:src="@{/static/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/select2/select2.full.min.js}"></script>
<script th:src="@{/static/bootstrap/select2/zh-CN.js}"></script>
<script th:src="@{/static/bootstrap/js/bootbox.js}"></script>
<script th:src="@{/static/bootstrap/toastr/toastr.min.js}"></script>
<script th:src="@{/static/bootstrap/editable/js/bootstrap-editable.js}"></script>
<script th:src="@{/static/bootstrap/table/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/table/extensions/editable/bootstrap-table-editable.min.js}"></script>
<script th:src="@{/static/bootstrap/select/bootstrap-select.min.js}"></script>
<script th:src="@{/static/bootstrap/select/defaults-zh_CN.min.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.core.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.excheck.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.exedit.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.exhide.js}"></script>
<script th:src="@{/static/bootstrap/fileUpload/fileinput.min.js}" type="text/javascript"></script>
<script th:src="@{/static/bootstrap/fileUpload/zh.js}" type="text/javascript"></script>
<script th:src="@{/static/bootstrap/spinner/bootstrap.spinner.js}" type="text/javascript"></script>
<script th:src="@{/static/miniui/miniui.js}"></script>
<script th:src="@{/static/layui/layui.all.js}" type="text/javascript"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/aboutUser.js}"></script>
</body>
</html>